中秋連假寫稿好像有點不太應景,所以今天不會講太多東西,最後把 Grid 單元的對齊稍微補一下,連假嘛,大家輕鬆一點。
不過武漢肺炎肆虐,大家還是小心為上。
如同前些日子提及的,其實就只有兩種,第三種是縮寫不太想把他算進來。資料的部分就不再次貼過來,忘記的人請參考 之前的文章,這邊簡單說明一下,
樣式 | 說明 |
---|---|
justify-self |
行內或主要軸方向的對齊,以 LTR 來說就是欄(column)方向對齊 |
align-self |
區塊或交叉軸方向對齊,以 Top-to-Bottom 就是列(row)方向對齊 |
place-self |
上面兩個樣式的縮寫 |
就如同昨天提到的,這個裡所謂的 對齊 其實主要的基準點就是格線軌道,所以,Grid 單元所謂的 as parent
有的時候是格線區域,並不是 Grid 容器。就以 normal
個關鍵字來說,他在不同的情況下,並不會全然的跟 auto
有相同的反應。
等等,你不是說不知道嗎?
我這麼說你就信了?
這種東西太冷門,我想會遇到的機會可能也不是很高。在軌道區域單元當中 normal
會相當於 stretch
,在 CSS 對齊模組當中,這個字在每一種系統中所呈現的結果都略有不同,講起來其實很搥心肝,所以跟格線系統沒啥太大關係就不贅述了。
總之,normal
在格線系統的單元中,等同於 stretch
,只需要記得這件事情就好了。
在講這些對齊屬性之前,請先記得不要用 stretch
也不要亂用 margin
,不然這些對齊的事情就是不會像是你想的那樣,也就是 邏輯上他對齊了,但是實際上看起來沒有。
對齊的部分基本上跟 Flexbox 所使用的方式雷同,只是 Flexbox 有 flex-*
開頭的設定值,而 Grid 的部分是無法使用的。但,基本上能通用該通用的部分都通用了。
這也是為什麼講到對齊就一直提到 CSS Box Alignment Module 的原因。
基本上,Grid 單元除了會受到 Grid 容器的對齊設定影響之外,自己本身的覆寫狀態也是決定對齊最終結果的一環。
Grid 容器 | Grid 單元 | 最終結果 |
---|---|---|
justify-items |
justify-self |
依照 justify-self 覆寫 |
align-items |
align-self |
依照 align-self 覆寫 |
講是這樣講,還記得我們一開始有提過 Grid 單元軌道區域容器嗎?
當你的 Grid 單元使用了 position: absolute
,且指定了上、右、下、左任何一個邊界,只要符合軌道區域容器的條件,那麼,任何對齊的設定都會被忽略,換句話說,一切都以 position: absolute
為主。
所以,在格線軌道區域內的 Grid 單元,其對齊權重由高到低就是,
position: absolute
,並指定邊界。justify-self
, align-self
覆蓋。margin
使用 auto
關鍵字。justify-items
, align-items
設定。所以,這就有點像是 position: absolute
會跳脫 Flexbox 的元件流一樣,只不過在 Grid 生態系裡面,由於可以定義軌道區域,所以那個區域就變成了一種 隱形的區塊,在那裡面的絕對定位就相對於區塊內發生而已。
至於已經使用了格線系統,為何還要使用絕對定位?
事事沒有絕對,除了數學!
數學不會就是不會!
沒問題,超出格線的 Grid 單元基本上一樣可以對齊,但是,如果搭配了 safe
關鍵字的話,那麼結果可能會跟你想像的不太一樣。如果忘記了什麼是 safe
請自行 回去複習。
沒錯,在 Grid 單元當中也是有 safe
可以使用,舉例來說,
.grid-container {
grid-template-columns: repeat(7, 100px);
}
.grid-item {
grid-column: 1 / 5;
justify-self: end;
width: 1000px;
}
這麼做的話,由於 Grid 單元容器總共使用了 5 個軌道,所以基本上他的寬度會是 500px
,這個時候偏偏 Grid 單元定義了 1000px
的寬度。所以根據 justify-self: end
的定義,他會對齊最後一個軌道,然後整個單元內容會超出容器。
如果在這邊使用了 safe
,即 justify-self: safe end
這樣的設定,那麼由於容器超出,會觸發 safe
的機制,所以他就會被換成 start
的結果,但是,你所使用的容器寬度,依舊會是 1000px
並不會改變。
先預祝大家中秋佳節快樂~在 Grid 單元該叮嚀的部分今天就算告一段落了。明天會開始講一些格線系統中擅長與不擅長的部分,順便抓一些時下流行的 CSS 框架出來討論。
目錄與小節:
[CSS] Flex/Grid Layout Modules, part 1
部落格同步放送:
[CSS] Flex/Grid Layout Modules, part 14